<template>
  <div class="statisticalanalysis">
    <el-button @click="print" class="signs print" v-if="list.shStatus==2">打印</el-button>  
    <el-tooltip class="item" effect="dark" content="审核通过才可以打印" v-else placement="top-start">
      <el-button class="signs print" style="cursor:not-allowed;">打印</el-button>  
    </el-tooltip>
    <div ref="print">
      <el-card class="box-card" >
        <div style="width:100%;text-align:center;">
            <span style="height:45px;display:inline-block;line-height:45px;font-weight:700;">动火安全作业证</span>
        </div>
        <table border="1" cellspacing="0">
          <tr height="35px">
            <td  colspan="7">
              <div class="donghuojibie">
                <div class="jibie" style="float:left;margin-left:1rem;">
                  <span style="float:left;">动火作业级别：</span>
                  <span>
                  <el-checkbox-group v-model="checkList" style="float:left;">
                    <el-checkbox label="特级" onclick="return false">特级</el-checkbox>
                    <el-checkbox label="一级" onclick="return false">一级</el-checkbox>
                    <el-checkbox label="二级" onclick="return false">二级</el-checkbox>
                  </el-checkbox-group>
                  </span>
                </div>
                <div class="bianhao" style="float:right;margin-right:2rem;">
                  <span>编号：</span>
                  <span v-text="list.zyzbh"></span>
                </div>
              </div>
            </td>
          </tr>
          <tr align="center" height="35px">
            <td width="16%" colspan="2">申请单位</td>
            <td v-text="list.sqdwmc"></td>
            <td width="16%">申请人</td>
            <td width="16%" v-text="list.sqrmc"></td>
            <td width="16%">会签单位</td>
            <td width="16%" colspan="2" v-text="list.hqdwmc"></td>
          </tr>
          <tr height="35px">
            <td align="center" colspan="2">动火地点(部位)</td>
            <td colspan="5" v-text="list.dhdd" style="padding-left:2rem;"></td>
          </tr>
          <tr height="35px">
            <td align="center" colspan="2">动火内容、方式</td>
            <td colspan="5" v-text="list.dhnr" style="padding-left:2rem;"></td>
          </tr>
          <tr align="left" height="35x">
            <td align="center" colspan="2">动火时间</td>
            <td colspan="5" align="center" style="padding-right:4rem;">
              自<span v-text="list.dhkssj"></span>
              始<span v-text="list.dhjssj"></span>止
            </td>
          </tr>
          <!-- <tr height="35px">
            <td align="center" colspan="2">动火时间</td>
            <td colspan="5" v-text="list.sqrq" style="padding-left:2rem;">
            自
              <span v-text="list.dhkssj"></span>始
              <span v-text="list.dhjssj"></span>止
            </td>
          </tr> -->
          <tr height="35px">
            <td align="center" colspan="2">施工单位</td>
            <td colspan="3" v-text="list.sgdwmc" style="padding-left:2rem;"></td>
            <td align="center">施工负责人</td>
            <td align="center" v-text="list.sgfzrmc"></td>
          </tr>
          <template width="100%" >
            <tr 
            align="center" height="35px"
            v-for="(listData,index) in dhxx"
            :key="index"
            width="100%">
                <td colspan="2">动火人</td>
                <td v-text="listData.dhrmc"></td>
                <td>特殊工种类别</td>
                <td v-text="listData.tsgzlb"></td>
                <td>特殊工种证号</td>
                <td v-text="listData.tzgzzh"></td>
              </tr>
          </template>
          <tr align="center" height="35px">
            <td colspan="2">监火人</td>
            <td colspan="3" v-text="list.jhrmc"></td>
            <td>监火资格证号</td>
            <td v-text="list.jhzgzh"></td>
          </tr>
          <tr align="center" height="35px">
            <td rowspan="2" colspan="2">采样分析</td>
            <td>采样分析时间</td>
            <td colspan="2" v-text="cyfx[0].cyfxsj"></td>
            <td v-text="cyfx[1].cyfxsj"></td>
            <td v-text="cyfx[2].cyfxsj"></td>
          </tr>
          <tr align="center" height="35px">
            <td>采样部位</td>
            <td colspan="2" v-text="cyfx[0].cybw"></td>
            <td v-text="cyfx[1].cybw"></td>
            <td v-text="cyfx[2].cybw"></td>
          </tr>
          <tr align="center" height="35px">
            <td rowspan="3">分析结果</td>
            <td rowspan="2">可燃气体</td>
            <td>作业环境大气</td>
            <td colspan="2" v-text="cyfx[0].zyhjdq"></td>
            <td v-text="cyfx[1].zyhjdq"></td>
            <td v-text="cyfx[2].zyhjdq"></td>
          </tr>
          <tr align="center" height="35px">
            <td>设备、容器、管线内部</td>
            <td colspan="2" v-text="cyfx[0].sbrqgxnb"></td>
            <td v-text="cyfx[1].sbrqgxnb"></td>
            <td v-text="cyfx[2].sbrqgxnb"></td>
          </tr>
          <tr align="center" height="35px">
            <td colspan="2">有毒气体</td>
            <td colspan="2" v-text="cyfx[0].ydqt"></td>
            <td v-text="cyfx[1].ydqt"></td>
            <td v-text="cyfx[2].ydqt"></td>
          </tr>
          <tr align="center" height="35px">
            <td colspan="3">分析人员签字</td>
            <td colspan="2" v-text="cyfx[0].fxryqzmc"></td>
            <td colspan="1" v-text="cyfx[1].fxryqzmc"></td>
            <td colspan="1" v-text="cyfx[2].fxryqzmc"></td>
          </tr>
          <tr align="center" height="35px">
            <td colspan="2">危害辨识</td>
            <td colspan="5" align="left" style="padding-left:2rem;">
              <el-checkbox-group v-model="checkHarm">
                <el-checkbox label="火灾爆炸" onclick="return false"></el-checkbox>
                <el-checkbox label="中毒和窒息" onclick="return false"></el-checkbox>
                <el-checkbox label="触电" onclick="return false"></el-checkbox>
                <el-checkbox label="灼烫" onclick="return false"></el-checkbox>
                <el-checkbox label="机械伤害" onclick="return false"></el-checkbox>
                <el-checkbox label="高处坠落" onclick="return false"></el-checkbox>
                <el-checkbox label="物体打击" onclick="return false"></el-checkbox>
                <el-checkbox label="坍塌" onclick="return false"></el-checkbox>
                <el-checkbox label="其它：" onclick="return false"></el-checkbox>
              </el-checkbox-group>
            </td>
          </tr>
          <tr height="35px">
            <td align="center" colspan="2">涉及的其他特殊作业</td>
            <td colspan="5" v-text="list.sjdqttszy" style="padding-left:2rem;"></td>
          </tr>
          <!-- 安全措施 -->
          <tr align="center" height="35px">
            <td>序号</td>
            <td colspan="5">安全措施</td>
            <td >确认人(签字)</td>
          </tr>
          <tr align="center" height="40px">
            <td>1</td>
            <td class="textleft" colspan="5">动火设备内部构件清理干净，蒸汽吹扫或水洗合格，达到用火条件</td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="40px">
            <td>2</td>
            <td class="textleft" colspan="5">断开与动火设备相连的所有管线，加盲板（）块</td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="40px">
            <td>3</td>
            <td class="textleft" colspan="5">动火点周围的下水井、地漏、地沟、电缆沟等已清除易燃易爆物，并已采取覆盖、铺沙、水封等手段进行隔离</td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="40px">
            <td>4</td>
            <td class="textleft" colspan="5">
              罐区内动火点同一围堰内和防火间距内的储罐不同时进行脱水作业
            </td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="40px">
            <td>5</td>
            <td class="textleft" colspan="5">高处作业已采取防火花飞溅措施
            </td>
           <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="40px">
            <td>6</td>
            <td class="textleft" colspan="5">动火点周围易燃物已清除</td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="40px">
            <td>7</td>
            <td class="textleft" colspan="5">电焊回路线已接在焊件上，把线不得穿过下水井或与其他设备搭接</td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="40px">
            <td>8</td>
            <td class="textleft" colspan="5">乙炔气瓶(直立放置)、氧气瓶与火源间的距离大于10m</td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="40px">
            <td>9</td>
            <td class="textleft" colspan="5">现场配备消防蒸汽带()根，灭火器()个，铁锹()把，石棉布()块</td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr align="center" height="80px">
            <td>10</td>
            <td colspan="5" class="textleft">其他安全措施：(如：特殊动火作业有专项方案)</td>
            <td v-text="list.aqcsqrrmc"></td>
          </tr>
          <tr height="35px">
            <td align="center" colspan="2">安全教育人</td>
            <td colspan="5" v-text="list.aqjyrmc" style="padding-left:2rem;"></td>
          </tr>
          <tr height="60px">
            <td colspan="7" style="border-bottom:none;padding-left:10px;">
              属地负责人意见：
              <span v-text="list.sdfzryj"></span>
            </td>
          </tr>
          <tr height="60px">
            <td align="right" colspan="7" style="border-top:none;padding-right:2rem;">
              <span v-text="list.fzrrq"></span>
            </td>
          </tr>
          <tr height="60px">
            <td colspan="7" style="border-bottom:none;padding-left:10px;">
              安全管理部门意见
              <span v-text="list.aqglbmyj"></span>
            </td>
          </tr>
          <tr height="60px">
            <td align="right" colspan="7" style="border-top:none;padding-right:2rem;">
              <span v-text="list.aqglrq"></span>
            </td>
          </tr>

          <tr height="60px">
            <td colspan="7" style="border-bottom:none;padding-left:10px;">
              动火审批人意见
              <span v-text="list.dhspryj"></span>
            </td>
          </tr>
          <tr height="60px">
            <td align="right" colspan="7" style="border-top:none;padding-right:2rem;">
              <span v-text="list.dhsprq"></span>
            </td>
          </tr>
          <tr height="60px">
            <td colspan="7" style="border-bottom:none;padding-left:10px;">
              完工验收
              <span v-text="list.wgys"></span>
            </td>
          </tr>
          <tr height="60px">
            <td align="right" colspan="7" style="border-top:none;padding-right:2rem;">
              <span v-text="list.wgysrq"></span>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { previewDataInterface } from '@/api/systemData/dataInterface'
import vueEsign from 'vue-esign'
import printStyle from './printStyle'
export default {
  props: ["list"],
  name:'dhaq',
  data() {
    return {
       checkList: [],
       checkHarm:[],
       dhxx:[],
       cyfx:[],
       RYOptions:[],
    }
  },
  created(){
    this.getRYOptions();
    this.cyfx = JSON.parse(this.list.cyfx);
    if(this.cyfx[0] == undefined){
      this.cyfx.push({
          cyfxsj:undefined,
          cybw:undefined,
          zyhjdq:undefined,
          sbrqgxnb:undefined,
          ydqt:undefined,
          fxryqz:undefined,
        });
    }
    if(this.cyfx[1] == undefined){
       this.cyfx.push({
          cyfxsj:undefined,
          cybw:undefined,
          zyhjdq:undefined,
          sbrqgxnb:undefined,
          ydqt:undefined,
          fxryqz:undefined,
        });
    }
    if(this.cyfx[2] == undefined){
        this.cyfx.push({
          cyfxsj:undefined,
          cybw:undefined,
          zyhjdq:undefined,
          sbrqgxnb:undefined,
          ydqt:undefined,
          fxryqz:undefined,
        });
    }
    this.dhxx = JSON.parse(this.list.dhxx);
    this.checkHarm = this.list.whbs.split(',');
    this.checkList = this.list.dhzyjb.split(',');
    this.list.dhkssj = this.formatDate(this.list.dhkssj);
    this.list.dhjssj = this.formatDate(this.list.dhjssj);
    this.list.fzrrq = this.formatDate(this.list.fzrrq);
    this.list.aqglrq = this.formatDate(this.list.aqglrq);
    this.list.dhsprq = this.formatDate(this.list.dhsprq);
    this.list.wgysrq = this.formatDate(this.list.wgysrq);
    this.list.sqrq = this.formatDate(this.list.sqrq);
  },
  methods:{
    formatDate(needTime){
      //needTime是整数，否则要parseInt转换
        if(needTime !== null && needTime !== undefined){
          var time = new Date(needTime);
          var y = time.getFullYear();
          var m = time.getMonth()+1;
          var d = time.getDate();
          var h = time.getHours();
          var mm = time.getMinutes();
          // var s = time.getSeconds();
          return y+'年'+this.add0(m)+'月'+this.add0(d)+'日'+this.add0(h)+'时'+this.add0(mm)+'分';
        }else{
          return '  年  月  日 时  分 ';
        }
    },
    add0(m){
      return m<10?'0'+m:m 
    },
    print() {
      let print = this.$refs.print.innerHTML
      let printPart = print + printStyle;
      let newTab = window.open('_blank');
      newTab.document.body.innerHTML = printPart;
      newTab.print();
      newTab.close();
    },
    getRYOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.RYOptions = res.data;
        for(let i in this.cyfx){
          this.cyfx[i].cyfxsj = this.formatDate(this.cyfx[i].cyfxsj);
          if(this.cyfx[i].fxryqz){
            for(let r in this.RYOptions){
                if(this.cyfx[i].fxryqz == this.RYOptions[r].F_Id){
                  this.cyfx[i].fxryqzmc = this.RYOptions[r].F_RealName;
                }
            }
          }
        }
        for(let i in this.dhxx){
          if(this.dhxx[i].dhr){
            for(let r in this.RYOptions){
                if(this.dhxx[i].dhr == this.RYOptions[r].F_Id){
                  this.dhxx[i].dhrmc = this.RYOptions[r].F_RealName;
                }
            }
          }
        }
			})
		},
  },
}
</script>

<style lang="scss" scoped>
.statisticalanalysis {
  .signs {
        position: absolute;
        right: 10px;
        top: 70px;
        &.print {
            top: 20px;
            right:50px;
        }
   }
  .box-card {
    width: 80%;
    margin: 0 auto;
    background: #fff;
    color: #606266;
    position: relative;
    table {
      margin: 0 auto;
      // .donghuojibie {
        // display: flex;
        // justify-content:space-between;
        // div{
        //   display:inline-block;
        // }
        // .jibie{
        //    margin-left:2rem;
        // }
        // .bianhao {
        //   // margin-right: 20px;
        //   margin-right:2rem;
        // }
      // }
      tr {
        .textleft {
          text-align:left;
          padding-left: 20px;
        }
      }
      span{
          display:inline-block;
          min-width:20px;
        }
      // 其他安全措施
      tr:nth-child(19) {
        .trPositon {
          position: relative;
          height:90px;
          width: 100%;
          .makePeopleTwo {
            position: absolute;
            right: 15%;
            top: 60%;
          }
        }
        .tdPostion {
          position: relative;
          width: 100%;
          height: 30px;
          .Safetymeasures {
            position: absolute;
            left: 2%;
            top: 50%;
          }
        }
      }
    }
  }
}
</style>